<template>
  <div class="page-root">
    <BasePanel>
      <BaseSearch :search="searchProps" @searchData="updateTable" @resetData="updateTable" />
      <div class="table-top-wrap">
        <div class="table-title">
          <span>列表</span>
        </div>
        <div class="btn-gruop">
          <a-button type="primary" icon="plus" ghost @click="handleAdd">新增</a-button>
        </div>
      </div>
      <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false"
        :scroll="{ x: 1000 }">
        <template slot="loanFilterLabelVOList" slot-scope="{ record }">
          <a-popover title="产品过滤表标签" trigger="click">
            <template slot="content">
              <div class="popover-content">
                <div class="row" :key="index"
                  v-for="(item, index) in record.loanFilterLabelVOList.filter((it) => it.labelName !== '城市')">
                  <div class="label">{{ item.labelName }}:</div>
                  <div class="value">{{ item.content || '/' }}</div>
                </div>
                <div class="row" :key="'城市' + index"
                  v-for="(item, index) in record.loanFilterLabelVOList.filter((it) => it.labelName === '城市')">
                  <div class="label">{{ item.labelName }}:</div>
                  <div class="value">
                    <a-tag color="blue" :key="i" v-for="(it, i) in item.content.split(',')">
                      {{ it }}
                    </a-tag>
                  </div>
                </div>
              </div>
            </template>
            <span class="primary">查看</span>
          </a-popover>
        </template>
        <template slot="operation" slot-scope="{ record }">
          <span class="primary" @click="handleEdit(record)">编辑</span>
          <a-divider type="vertical" />
          <span class="primary" @click="handleSynchronize(record)">同步</span>
        </template>
      </BaseTable>
      <div v-show="dataSource.length > 0" class="page-footer">
        <BasePagination :page-key.sync="pageKey" :get-list="tableInit" />
      </div>
    </BasePanel>
    <FormModal :visible="formShow" ref="FormModal_ref" :default="defaultObj" @success="successForm" @close="closeForm" />
    <SynchronizeModal ref="SynchronizeModal_ref" :visible="synchronizeShow" :default="defaultObj" @success="successForm"
      @close="closeSynchronize" />
  </div>
</template>

<script>
import { searchProps, columns } from './option.js';
import * as Ajax from '@/api/loan';
import FormModal from './form';
import SynchronizeModal from './synchronize';
export default {
  components: {
    FormModal,
    SynchronizeModal,
  },
  data() {
    return {
      searchProps,
      searchForm: {},
      columns,
      loading: true,
      dataSource: [],
      pageKey: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      formShow: false,
      defaultObj: {},
      synchronizeShow: false,
    };
  },
  created() {
    this.tableInit();
    this.getSelect();
  },
  methods: {
    getSelect() {
      Ajax.getChannelSelect().then((res) => {
        if (res.success) {
          searchProps[0].selectOptions = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              label: it.channelName,
              value: it.id,
            }))
            : [];
        }
      });
      Ajax.getProductSelect().then((res) => {
        if (res.success) {
          searchProps[1].selectOptions = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              label: `${it.productName}(${it.productNike})`,
              value: it.id,
            }))
            : [];
        }
      });
    },
    updateTable(params = {}) {
      this.searchForm = { ...params };
      this.pageKey = this.$options.data().pageKey;
      this.tableInit();
    },
    // table 初始化
    tableInit() {
      this.loading = true;
      const { current, pageSize } = this.pageKey;
      const params = { pageNum: current, pageSize, ...this.searchForm };
      Ajax.getFilterList(params)
        .then((res) => {
          const { data, totalCount } = res;
          this.dataSource = Array.isArray(data)
            ? data.map((it) => {
              return {
                ...it,
                isChecked: it.loanAssistanceStatus === 0,
                loading: false,
              };
            })
            : [];
          this.pageKey.total = totalCount;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleAdd() {
      this.$refs.FormModal_ref.getSelect()
      this.formShow = true;
    },
    // 编辑
    handleEdit(record) {
      const { mappingId, loanId, channelId, loanFilterLabelVOList } = record;
      this.defaultObj = {
        id: mappingId,
        loanId,
        channelId,
        loanFilterLabelVOList,
      };
      this.$refs.FormModal_ref.getSelect()
      this.formShow = true;
    },
    handleSynchronize(record) {
      const { loanId, loanFilterLabelVOList } = record;
      this.defaultObj = {
        loanId,
        loanFilterConditionDTOList: loanFilterLabelVOList,
      };
      this.synchronizeShow = true;
      this.$refs.SynchronizeModal_ref.getSelect()
    },
    successForm() {
      this.tableInit();
      this.closeForm();
    },
    closeForm() {
      this.formShow = false;
      this.defaultObj = {};
    },
    closeSynchronize() {
      this.synchronizeShow = false;
      this.defaultObj = {};
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.ant-tag) {
  margin-bottom: 4px;
}

.popover-content {
  max-width: 400px;
}

.row {
  display: flex;

  &:not(:last-child) {
    margin-bottom: 4px;
  }

  &:last-child {
    margin-top: 8px;
  }

  .label {
    margin-right: 8px;
    min-width: 60px;
    text-align: right;
  }

  .value {
    min-width: 80px;
    color: #999;
  }
}

.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;

  &>button {
    margin-left: 12px;

    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
